<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子网页版</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<style type="text/css">
ol,li{
	margin: 0px;
	padding: 0px
}


</style>
<script type="text/javascript">
	function keydown(e) {
		if ( e.keyCode < 37 || e.keyCode > 40 ){
			return;
		}
		v.move(e.keyCode)
		// e.keyCode==37 && /*游戏左移*/ 	||
		// e.keyCode==38 && /*游戏上移*/ 		||
		// e.keyCode==39 && /*游戏右移*/ 	||
		// e.keyCode==40 && /*游戏下移*/;
		// // 判断当前关结束就进入下一关
	}
</script>
</head>
<body onkeydown="keydown(event)">
	<div id="main" style="padding: 20px;">
		<h1>推箱子网页版</h1>
		<div id="map" style="float: left">
			<div v-for="row in game.map" style="height: 30px">
				<img v-for=" i in row" :src="'imgs/'+i+'.GIF'">
			</div>
		</div>
		<div id="ctl" style="padding: 20px; float: left; text-align: center;">
			<h2>第{{getindex}}关</h2>
			<span>第{{step}}步</span><br>
			<br>
			<input :value="name" placeholder="尊姓大名" style="width:96px;text-align: center">
			<br>
			<br>
			<button style="width: 100px">重新开始</button>
			<br>
			<br>
			<button style="width: 100px">保    存</button>
			<br>
			<br>
			<button style="width: 100px">加    载</button>
		</div>
		<div id="score" style="padding: 20px; float: left; text-align: left">
			<h2>排名</h2>
			<ol>
				<li v-for="user in usersbytime" style="width: 100px">
					{{user.name}}   :   {{user.time}} 秒
				</li>

			</ol>
		</div>
	</div>
<script>
	var v = new Vue({
		el:"#main",
		data:{
			game : null,
			scores:[],
			//scores: [[对象],[]]
			time:0,
			name:"",
			index:0
		},
		created(){
			//开始之前读取游戏通关数据
			var json = localStorage.getItem("pushbox_scores");
			var scores=JSON.parse(json);
			if (scores){
				this.scores=scores;
			}
			this.game = new Game();

			this.game.next();
			//记录游戏开始时间
			this.time=new Date();
		},
		methods:{
			move(keycode){
				if (keycode==37){
					this.game.left();
				}else if (keycode==38){
					this.game.up();
				}else if (keycode==39){
					this.game.right();
				}else if (keycode==40){
					this.game.down();
				}else {
					return;
				}
				//强制刷新
				this.$forceUpdate();
				if (this.game.youWin()){
					setTimeout(()=>{
						alert("YOU WIN!");
						//获取游戏关数 =》scores 数组下标值
						var index = this.game.getIndex();
						//获取通关用户数组
						var users = this.scores[index];
						if (users ==undefined){
							users = [];
							this.scores[index]=users;
						}

						//用户输入自己的名字
						var name = prompt("请输入自己的名字");
						//获取通关的时间
						var time =new Date().getTime()-this.time.getTime();
						time = parseInt(time/1000);
						//构建对象
						var score = {
							name:name,
							time:time
						}
						users.push(score);

						//将成绩保存到localStorage 浏览器本地存储对象
						var json = JSON.stringify(this.scores); //将对象转换成JSON格式字符串
						localStorage.setItem("pushbox_scores",json);
						this.game.next();
						this.time=new Date();
					},100);
				}
			},

		},
		computed:{
			step:function (){
				return this.game.getStepNumber();
			},
			usersbytime:function (){
				if (this.scores[this.game.getIndex()]){
					return sortkey(this.scores[this.game.getIndex()],'time');
				}else{
					return "";
				}
			},
			getindex(){
				return this.game.getIndex();
			}

		}
	});
	function sortkey(arr,key){
		return arr.sort(function (a,b){
			var x = a[key];
			var y =b[key];
			return ((x<y)?-1:(x>y)?1:0);
		});
	}
</script>
</body>
</html>